class Todo {
    constructor(id, text, completed) {
        this.id = id;
        this.text = text;
        this.completed = completed || false;
    }
}

class TodoManager {
    constructor() {
        this.todos = [];
        this.currentFilter = 'all';
        this.init();
    }

    init() {
        this.loadFromStorage();
        this.renderTodos();
        this.bindEvents();
    }

    loadFromStorage() {
        const stored = localStorage.getItem('todos');
        if (stored) {
            const parsed = JSON.parse(stored);
            this.todos = parsed.map(t => new Todo(t.id, t.text, t.completed));
        }
    }

    saveToStorage() {
        localStorage.setItem('todos', JSON.stringify(this.todos));
    }

    bindEvents() {
        const input = document.querySelector('.todo-input');
        const addBtn = document.querySelector('.add-btn');
        const filterBtns = document.querySelectorAll('.filter-btn');

        addBtn.addEventListener('click', () => {
            this.addTodo(input.value);
            input.value = '';
        });

        input.addEventListener('keypress', e => {
            if (e.key === 'Enter') {
                this.addTodo(input.value);
                input.value = '';
            }
        });

        filterBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                this.currentFilter = btn.dataset.filter;
                filterBtns.forEach(b => b.classList.remove('active'));
                btn.classList.add('active');
                this.renderTodos();
            });
        });
    }

    addTodo(text) {
        if (!text.trim()) return;
        const newTodo = new Todo(Date.now(), text.trim());
        this.todos.push(newTodo);
        this.saveToStorage();
        this.renderTodos();
    }

    toggleStatus(id) {
        const todo = this.todos.find(t => t.id === id);
        if (todo) {
            todo.completed = !todo.completed;
            this.saveToStorage();
            this.renderTodos();
        }
    }

    deleteTodo(id) {
        this.todos = this.todos.filter(t => t.id !== id);
        this.saveToStorage();
        this.renderTodos();
    }

    renderTodos() {
        const list = document.querySelector('.todo-list');
        const countEl = document.querySelector('.todo-count');
        let filtered = this.todos;

        if (this.currentFilter === 'active') {
            filtered = this.todos.filter(t => !t.completed);
        } else if (this.currentFilter === 'completed') {
            filtered = this.todos.filter(t => t.completed);
        }

        list.innerHTML = '';
        filtered.forEach(todo => {
            const item = document.createElement('div');
            item.className = `todo-item ${todo.completed ? 'completed' : ''}`;
            item.innerHTML = `
                <input type="checkbox" class="todo-check" ${todo.completed ? 'checked' : ''}>
                <span class="todo-text">${todo.text}</span>
                <button class="delete-btn">×</button>
            `;
            list.appendChild(item);

            item.querySelector('.todo-check').addEventListener('change', () => {
                this.toggleStatus(todo.id);
            });

            item.querySelector('.delete-btn').addEventListener('click', () => {
                this.deleteTodo(todo.id);
            });
        });

        const active = this.todos.filter(t => !t.completed).length;
        const total = this.todos.length;
        countEl.textContent = `${active} 个未完成，${total} 个总计`;
    }
}

new TodoManager();